<template>
  <div class="main">
    <Top name1='订单管理' name2="订单列表"></Top>
    <el-card style="margin-top:40px;min-width :1400px !important;">
      <el-table
          :data="orderList"
          border
          style="width: 1071px;padding:0;margin-top:20px;margin-left: 200px;text-align: ;">
          <el-table-column
            type="index"
            label="#"
            width="100">
          </el-table-column>
          <el-table-column
            prop="order_number"
            label="订单编号"
            width="300">
          </el-table-column>
          <el-table-column
            prop="order_price"
            label="订单价格"
            width="100">
          </el-table-column>
          <el-table-column
            label="是否支付"
            width="100">
            <template slot-scope="scoped">
              <el-tag type="danger" v-if="scoped.row.pay_status==0">未付款</el-tag>
              <el-tag type="success" v-if="scoped.row.pay_status==1">已付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="is_send"
            width="100"
            label="是否发货">
          </el-table-column>
          <el-table-column
            width="250"
            label="下单时间">
            <template slot-scope="scoped">
              {{ time(scoped.row.create_time) }}
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            label="操作">
            <template slot-scope="scoped">
              <el-tooltip class="item" effect="light" content="编辑订单" placement="top">
                <el-button class="sm" type="primary" @click="xgclick(scoped.row)" circle icon="el-icon-edit"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="light" content="物流跟踪" placement="top">
                <el-button class="sm" type="success" circle icon="el-icon-position" @click="dingwei"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
    <!-- 分页部分 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page=getParams.pagenum
              :page-sizes="[5,10]"
              :page-size=getParams.pagesize
              layout="total, sizes, prev, pager, next, jumper"
              :total=total>
            </el-pagination>
          </div>
    </el-card>
    <!-- 物流信息 -->
    <el-dialog
      title="物流信息"
      :visible.sync="dingweizhanshi"
      width="50%"
      >
      <el-timeline :reverse="reverse" style="margin: 10px 50px">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.time">
          {{activity.context}}
        </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dingweizhanshi = false">取 消</el-button>
        <el-button type="primary" @click="dingweizhanshi = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改订单状态 -->
    <el-dialog
      title="物流信息"
      :visible.sync="xgDis"
      width="50%"
      >
      <el-form  :model="xgForm" ref="xgForm" label-width="100px" class="demo-dynamic">

        <el-form-item
          prop="is_send"
          label="是否发货"
          :rules="[
            { required: true,message: '请输入发货状态', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="xgForm.is_send"></el-input>
        </el-form-item>
        <el-form-item
          prop="order_pay"
          label="订单支付"
          :rules="[
            { required: true,message:'请输入支付方式', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="xgForm.order_pay"></el-input>
        </el-form-item>
        <el-form-item
          prop="order_price"
          label="订单价格"
          :rules="[
            { required: true,message:'请输入订单价格', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="xgForm.order_price"></el-input>
      </el-form-item>
      <el-form-item
          prop="order_number"
          label="订单数量"
          :rules="[
            { required: true,message:'请输入订单数量', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="xgForm.order_number"></el-input>
      </el-form-item>
      <el-form-item
          prop="pay_status"
          label="支付状态"
          :rules="[
            { required: true,message:'请输入订单支付状态', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="xgForm.pay_status"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="xgDis = false">取 消</el-button>
        <el-button type="primary" @click="xgAjax">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Top from '../../components/top.vue';
import _ from 'lodash'

import { getList,getdingwei,xgOrder } from '../../api/orders';
  export default {
    components: {
      Top
    },
    data () {
      return {
        getParams:{
          pagenum:1,
          pagesize:JSON.parse(window.sessionStorage.getItem('ordersListSize'))
        },
        orderList:[],
        total:0,
        dingweizhanshi:false,
        wuliudata:[],
        reverse: true,
        activities: [],
        xgDis:false,
        xgForm:{
        }
      };
    },
    created() {
      this.getData()
    },
    mounted() {
     
    },
    methods: {
      async getData (){
        if(!window.sessionStorage.getItem('ordersListSize')){
          this.getParams.pagesize = 10
        }
        const res = await getList(this.getParams)
        if(res.data.meta.status!==200){
          return this.$message.error("获取列表失败")
        }
        this.orderList = res.data.data.goods
        this.total = res.data.data.total
      },
    // 设置每页条数
    handleSizeChange(num){
        this.getParams.pagesize = num
        window.sessionStorage.setItem("ordersListSize",num)
        this.getData()
      },
    // 点击第几页
      handleCurrentChange(num){
        this.getParams.pagenum = num
        this.getData()
      },
    // 物流跟踪
      async dingwei(){
        const res = await getdingwei()
        if(res.data.meta.status!==200 ){
          return this.$message.error("获取订单失败")
        }
        this.activities=res.data.data
        this.dingweizhanshi = true
      },
    // 修改框
      xgclick(row){
        this.xgForm = row
        console.log(row);
        this.xgDis = true
      },
      // 修改请求
      async xgAjax(){
        var obj = {}
        obj['is_send'] = this.xgForm.is_send
        obj['order_pay'] = this.xgForm.order_pay
        obj['order_price'] = this.xgForm.order_price
        obj['order_number'] = this.xgForm.order_number
        obj['pay_status'] = this.xgForm.pay_status
        const res = await xgOrder(this.xgForm.order_id,obj)
        if(res.data.meta.status!=201){
          return this.$message.error("更新失败")
        }
        this.xgDis = false
        this.getData()
        return this.$message.success("更新成功")
        
        
      }
    },
    computed:{
      time(){
        // 个位数补0
        function addZero(num){
          if(parseInt(num) < 10){
          num = '0'+num
          }
          return num
        }
        // 时间戳转日期 传参用过函数返回
        return function(i){
          if(i){
            var oDate = new Date(i),
            oYear = oDate.getFullYear(),
            oMonth = oDate.getMonth()+1,
            oDay = oDate.getDate(),
            oHour = oDate.getHours(),
            oMin = oDate.getMinutes(),
            oSen = oDate.getSeconds(),
            oTime = oYear +'-'+ addZero(oMonth) +'-'+ addZero(oDay) +' '+ addZero(oHour) +':'+
            addZero(oMin) +':'+addZero(oSen);
            return oTime
          }else{
            return "未知参数"
          }
           
        }
      }
      ,
      status(){
        return function(i){
           return i == 0? "未付款":"已付款"
        }
      }
    }
  }
</script>
<style lang='scss' scoped>
.main{
  padding: 20px 40px;
  position: relative;
  .block{
    display: flex;

    width: 1100px;
    position: absolute;
    bottom: -160px;
    justify-content: center;
  }
  .sm{
    padding: 10px;
    font-size: 12px;
  }
}
</style>